* {
    padding: 0;
    margin: 0;
    list-style: none;
}

img {
    width: 100%;
}

.box {
    margin: 0 auto;
    width: 500px;
    /* height: 230px; */
    border: 5px solid #000;
    /* box-sizing: border-box; */
    overflow: hidden;
    position: relative;
}


/* 设置图片样式 */


/* .box > .img_box {
  font-size: 0;
} */

.box>.img_box>ul {
    /* 不让图片换行 */
    white-space: nowrap;
    /* 消除换行空格 */
    font-size: 0;
    transition: 0.2s ease-in-out;
    /* 继承父级的宽度，向左移动父盒子的距离 */
    /* transform: translateX(-100%); */
}

.box>.img_box>ul>li {
    display: inline-block;
    width: 500px;
    height: 200px;
}

.box>.img_box>ul>li>span {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: skyblue;
    font-size: 20px;
}


/* 设置左右箭头 */

.box>.img_box>.arrow_left,
.box>.img_box>.arrow_right {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    color: gray;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.box>.img_box>.arrow_left {
    position: absolute;
    top: 30%;
    left: 0;
}

.box>.img_box>.arrow_right {
    position: absolute;
    top: 30%;
    right: 0;
}


/* 给左右箭头hover效果 */

.box>.img_box>.arrow_left:hover,
.box>.img_box>.arrow_right:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.2s ease-in-out;
}


/* 给小圆点设置样式 */

.box>.dot_box {
    text-align: center;
}

.box>.dot_box>span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    background-color: greenyellow;
    margin: 0 10px;
    border-radius: 50%;
}

.box>.dot_box>span:hover {
    background-color: grey;
    transition: background-color 0.1s ease-in-out;
}

.box>.dot_box>.dotActive {
    background-color: grey;
}